<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>巡检计划详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
      </div>
      
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="basic">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="计划编号">{{ inspectionPlan.planCode }}</el-descriptions-item>
            <el-descriptions-item label="计划状态">
              <el-tag v-if="hasActiveRecords" type="primary">执行中</el-tag>
              <el-tag v-else type="info">待执行</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="计划名称">{{ inspectionPlan.planName }}</el-descriptions-item>
            <el-descriptions-item label="巡检周期">
              <span v-if="inspectionPlan.cycleType === '1'">每天</span>
              <span v-else-if="inspectionPlan.cycleType === '2'">每周</span>
              <span v-else-if="inspectionPlan.cycleType === '3'">每月</span>
              <span v-else-if="inspectionPlan.cycleType === '4'">每季度</span>
              <span v-else-if="inspectionPlan.cycleType === '5'">每年</span>
            </el-descriptions-item>
            <el-descriptions-item label="巡检人员">{{ inspectionPlan.inspectorName }}</el-descriptions-item>
            <el-descriptions-item label="开始日期">{{ inspectionPlan.startDate }}</el-descriptions-item>
            <el-descriptions-item label="结束日期">{{ inspectionPlan.endDate }}</el-descriptions-item>
            <el-descriptions-item label="创建者">{{ inspectionPlan.createBy }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ inspectionPlan.createTime }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ inspectionPlan.remark }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        
        <el-tab-pane label="巡检设备" name="equipment">
          <el-table :data="equipmentList" border style="width: 100%">
            <el-table-column prop="equipmentCode" label="设备编号" align="center"></el-table-column>
            <el-table-column prop="equipmentName" label="设备名称" align="center"></el-table-column>
            <el-table-column prop="specification" label="规格型号" align="center"></el-table-column>
            <el-table-column prop="location" label="所在位置" align="center"></el-table-column>
            <el-table-column prop="department" label="使用部门" align="center"></el-table-column>
            <el-table-column prop="status" label="设备状态" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status === '0'" type="success">正常</el-tag>
                <el-tag v-else-if="scope.row.status === '1'" type="danger">故障</el-tag>
                <el-tag v-else-if="scope.row.status === '2'" type="warning">维修中</el-tag>
                <el-tag v-else-if="scope.row.status === '3'" type="info">报废</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="巡检项目" name="items">
          <el-table :data="inspectionItems" border style="width: 100%">
            <el-table-column prop="itemName" label="巡检项名称" align="center"></el-table-column>
            <el-table-column prop="itemDescription" label="巡检内容" align="center"></el-table-column>
            <el-table-column prop="standardValue" label="标准值" align="center"></el-table-column>
            <el-table-column prop="unit" label="单位" align="center"></el-table-column>
            <el-table-column prop="checkMethod" label="检查方法" align="center"></el-table-column>
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="巡检记录" name="records">
          <div v-if="inspectionRecords.length > 0">
            <el-table :data="inspectionRecords" border style="width: 100%">
              <el-table-column prop="recordCode" label="巡检单号" align="center"></el-table-column>
              <el-table-column prop="inspectBy" label="巡检人" align="center"></el-table-column>
              <el-table-column prop="inspectDate" label="巡检日期" align="center"></el-table-column>
              <el-table-column prop="status" label="巡检状态" align="center">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.status === '0'" type="info">待巡检</el-tag>
                  <el-tag v-else-if="scope.row.status === '1'" type="warning">巡检中</el-tag>
                  <el-tag v-else-if="scope.row.status === '2'" type="success">已完成</el-tag>
                  <el-tag v-else-if="scope.row.status === '3'" type="danger">异常</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="150">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="viewRecord(scope.row)"
                  >查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else style="text-align: center; margin: 20px 0; color: #909399;">
            <el-empty description="暂无巡检记录"></el-empty>
          </div>
        </el-tab-pane>
      </el-tabs>

      <div class="action-buttons" style="margin-top: 20px; text-align: center">
        <el-button @click="goBack">返回</el-button>
        <el-button 
          type="primary" 
          v-if="inspectionPlan.status === '0' || inspectionPlan.status === '1'"
          @click="handleExecute"
        >执行巡检</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getInspectionPlan } from "@/api/sb/inspectionPlan";

export default {
  name: "InspectionPlanDetail",
  data() {
    return {
      // 巡检计划ID
      id: null,
      // 激活的选项卡
      activeName: 'basic',
      // 巡检计划信息
      inspectionPlan: {
        planCode: "",
        planName: "",
        cycleType: "",
        inspectorName: "",
        startDate: "",
        endDate: "",
        status: "",
        createBy: "",
        createTime: "",
        remark: ""
      },
      // 设备列表
      equipmentList: [],
      // 巡检项目列表
      inspectionItems: [],
      // 巡检记录列表
      inspectionRecords: []
    };
  },
  computed: {
    // 判断是否有正在执行的巡检单
    hasActiveRecords() {
      if (!this.inspectionRecords || this.inspectionRecords.length === 0) {
        return false;
      }
      // 检查是否有状态为待巡检(0)或巡检中(1)的记录
      return this.inspectionRecords.some(record => 
        record.status === '0' || record.status === '1'
      );
    }
  },
  created() {
    this.id = this.$route.params.id;
    this.getDetail();
  },
  methods: {
    /** 获取详细信息 */
    getDetail() {
      getInspectionPlan(this.id).then(response => {
        console.log("获取巡检计划详情:", response.data);
        
        // 检查返回数据结构
        if (response.data && response.data.planInfo) {
          // 新的数据结构，包含planInfo、equipmentList、inspectionItems、inspectionRecords
          this.inspectionPlan = response.data.planInfo;
          this.equipmentList = response.data.equipmentList || [];
          this.inspectionItems = response.data.inspectionItems || [];
          this.inspectionRecords = response.data.inspectionRecords || [];
          console.log("使用新数据结构");
        } else {
          // 旧的数据结构，直接使用response.data
          this.inspectionPlan = response.data;
          // 尝试从旧结构中获取列表数据
          if (response.data.equipmentList) {
            this.equipmentList = response.data.equipmentList;
          }
          if (response.data.inspectionItems) {
            this.inspectionItems = response.data.inspectionItems;
          }
          if (response.data.inspectionRecords) {
            this.inspectionRecords = response.data.inspectionRecords;
          }
          console.log("使用旧数据结构");
        }
        
        console.log("设备列表:", this.equipmentList);
        console.log("巡检项目:", this.inspectionItems);
        console.log("巡检记录:", this.inspectionRecords);
      });
    },
    /** 返回按钮操作 */
    goBack() {
      this.$router.push("/sb/Inspection-plan");
    },
    /** 执行巡检 */
    handleExecute() {
      this.$router.push({ path: '/sb/Inspection-list/add', query: { planId: this.id } });
    },
    /** 查看巡检记录详情 */
    viewRecord(row) {
      // 确保使用正确的属性名
      const recordId = row.recordId || row.id;
      if (!recordId) {
        this.$message.error("无法获取巡检记录ID");
        return;
      }
      this.$router.push({ path: '/sb/Inspection-list/detail/' + recordId });
    }
  }
};
</script> 